<template>
	<view class="container" :style="{height: screenHeight + 'px'}">
		<u-skeleton rows="4" :loading="loading" :title="false"  :rowsWidth="[700,700,700,700]" :rowsHeight="[200,290,320,400]">
			<view class="header">
				<view :style="{height: 'var(--status-bar-height)',width: screenWidth+'px', backgroundColor: 'white',zIndex: '999'}"></view>
				<u-search :clearabled="true" shape="square" :disabled="true" input-align="center"  @click="openSearchPage"
							placeholder="搜索" :style="{width:screenWidth*0.85+'px',right: screenWidth*0.04+'px'}" class="searchBar" margin="0 auto" height="60" :show-action="false">
				</u-search>
				<view class="options" style="position: absolute;" :style="{width: screenWidth*0.09+'px', height: '64upx', top: statusBarHeight+10+'px', left: screenWidth*0.895+'px'}"
				@click="openOptions">
					<u-icon name="list" size="60" style="z-index: 999;"></u-icon>
				</view>
				
				<u-overlay :show="maskShow" @click="leaveOption" :opacity="0.15" z-index="800">
					<view class="optionsList" :style="{width: screenWidth*0.35+'px', height: screenHeight*0.20+'px', left: screenWidth*0.62+'px', top: screenHeight*0.055+statusBarHeight+'px'}">
							<view class="everOption" v-for="(item, index) in optionsList" :key="index" @tap.stop="chooseOption(item.id)">
								<image :src="item.logo" mode="aspectFill" style="width: 55upx; height: 55upx;"></image>
								<view class="optionName">
									{{item.name}}
								</view>
							</view>
					</view>
				</u-overlay>
			</view>
			
			
			<view class="main">
				<view class="guide" :style="{width: screenWidth*0.94+'px', height: screenHeight*0.08+'px'}">
					<view class="activities" style="transition: all 0.3s ease-in;" :style="{backgroundColor: isChoose==0 ? 'rgba(254,215,26,1)' : 'white', color: isChoose==0 ? 'white' : 'black', width: '29%', height: '95%'}" @click="isChoose=0">
						<view class="t-icon t-icon-huodong" style="width: 70upx; height: 70upx; transition: all 0.2s ease-in;" :id="[isChoose==0 ? 'chosen' : '']"></view>
						<span style="transition: all 0.1s ease-in;">校园活动</span>
					</view>
					
					<view class="pride" style="transition: all 0.3s ease-in;" :style="{backgroundColor: isChoose==1 ? 'rgba(240,55,82,0.9)' : 'white', color: isChoose==1 ? 'white' : 'black',width: '29%', height: '95%'}" @click="isChoose=1">
						<view class="t-icon t-icon-jiangbei" style="width: 70upx; height: 70upx; transition: all 0.2s ease-in;" :id="[isChoose==1 ? 'chosen' : '']"></view>
						<span style="transition: all 0.1s ease-in;">比赛组队</span>
					</view>
					
					<view class="code" style="transition: all 0.3s ease-in;" :style="{backgroundColor: isChoose==2 ? 'rgba(102,169,201,1)' : 'white', color: isChoose==2 ? 'white' : 'black',width: '29%', height: '95%'}" @click="isChoose=2">
						<view class="t-icon t-icon-daimashengcheng" style="width: 70upx; height: 70upx; transition: all 0.2s ease-in;" :id="[isChoose==2 ? 'chosen' : '']"></view>
						<span style="transition: all 0.1s ease-in;">项目组队</span>
					</view>
				</view>
				
				<view class="page" :style="{height: screenHeight*0.78 + 'px', width: screenWidth*0.94 + 'px'}">
					<activity ref="activity" v-show="isChoose==0" :cardWidth="screenWidth*0.94" :cardHeight="screenHeight*0.73"></activity>
					<competition ref="competition" v-show="isChoose==1" :cardWidth="screenWidth*0.94" :cardHeight="screenHeight*0.73"></competition>
					<codeTeam ref="codeTeam" v-show="isChoose==2"></codeTeam>
				</view>
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	export default{
		props:{
			
		},
		data(){
			return {
				loading: false,
				isChoose: 0,
				screenHeight: 0,
				screenWidth: 0,
				statusBarHeight: 0,
				maskShow: false,
				optionsList: [
					{
						id: 0,
						logo: '/static/image/newTeam.png',
						name: '发布招募'
					},
					{
						id: 1,
						logo:'/static/image/mine.png',
						name: '我的招募'
					},
					{
						id: 2,
						logo: '/static/image/coo.png',
						name: '我加入的'
					},
					{
						id: 3,
						logo: '/static/image/publishActivity.png',
						name: '发布活动'
					}
				]
			}
		},
		methods:{
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight
						this.screenWidth = res.screenWidth
						this.statusBarHeight = res.statusBarHeight
					}
				})
			},
			update(){
				//console.log(this.isChoose)
				if(this.isChoose == 0){
					this.$refs.activity.getMore()
				}else if(this.isChoose == 1){
					this.$refs.competition.getMore()
				}
				// else{
				// 	this.$refs.codeTeam.getMore()
				// }
			},
			openOptions(){
				this.maskShow = true
			},
			leaveOption(){
				this.maskShow = false
			},
			chooseOption(id){
				if(id==0){
					this.publish(id)
				}else if(id==1){
					this.openMyTeam(id)
				}else if(id==2){
					this.openMyJoin(id)
				}else{
					this.publishActivity(id)
				}
				this.maskShow = false
			},
			publish(id){
				uni.navigateTo({
					url:'/pages/components/aboutTeam/optionsPage/pubish?statusBarHeight='+this.statusBarHeight
				})
			},
			openMyTeam(id){
				uni.navigateTo({
					url:'/pages/components/aboutTeam/optionsPage/mine?statusBarHeight='+this.statusBarHeight
				})
			},
			openMyJoin(id){
				uni.navigateTo({
					url: '/pages/components/aboutTeam/optionsPage/myjoin?statusBarHeight='+this.statusBarHeight
				})
			},
			publishActivity(id){
				uni.navigateTo({
					url:'/pages/components/aboutTeam/optionsPage/publishActivity?statusBarHeight='+this.statusBarHeight
				})
			},
			openSearchPage(){
				
			}
		},
		onShow() {
		},
		mounted() {
			this.init()
		}
	}
</script>

<style scoped>
	.container{
		width: 100%;
		background-image: linear-gradient(to bottom, skyblue, white, white);
	}
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 10upx;
		border-bottom: 2upx solid rgba(212, 212, 212, 0.2);
	}
	::v-deep .searchBar{
		position: relative;
		top: 20upx;
		position: relative;
	}
	.main{
		position: relative;
		display: flex;
		width: 96%;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}
	.guide{
		width: 90%;
		height: 110upx;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.guide>view{
		background-color: coral;
/* 		width: 180upx;
		height: 120upx; */
		border-radius: 10%;
		box-shadow: 2rpx 4rpx 10rpx rgba(220, 220, 220, 0.3);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: visible;
	}
	span{
		font-size: 0.9rem;
		margin-top: 10upx;
		font-family: sans-serif;
		font-weight: bold;
		-webkit-font-smoothing:subpixel-antialiased;
	}
	#chosen{
		transform: translateY(-10px);
	}
	.page{
		position: fixed;
		bottom: 20upx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		box-shadow: -4upx 4upx 10upx rgba(190, 222, 250, 0.3);
		background-color:white;
		margin: 0 auto;
	}
	.options{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.optionsList{
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(107, 109, 111, 1.0);
		color: white;
		border-radius: 10upx;
	}
	.optionsList::before{
		content: '';
		position:  relative;
		width: 0;
		height: 0;
		border-bottom: 30upx solid rgba(107, 109, 111, 1.0);
		border-left: 30upx solid solid transparent;
		border-right: 30upx solid transparent;
		transform: rotate(135deg);
		left: 42%;
		top: -15upx;
	}
	.everOption{
		display:flex;
		justify-content: space-around;
		width: 90%;
		height: 30%;
		margin-bottom: 15upx;
		border-bottom: 2upx solid rgba(220, 220, 220, 0.3);
	}
</style>                     